<template>
   
        <main class="container mx-auto px-4 py-8">
          <button @click="reset()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
          >
            重置
          </button>
          <input type="number" v-model="rolNum" 
          placeholder="请输入要随机的角色个数" 
          autofocus
          class="w-56 border border-orange-500 hover:border-orange-600 rounded px-3 py-2 leading-tight focus:outline-none focus:shadow-outline"
           min="0" max="70">
          
          <button @click="getRandomCharacters()" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded"
          >
            随机角色
          </button>
           <button @click="getRandomRank()" class="bg-yellow-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded"
          >
            随机星魂
          </button>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
                
              <ArticleCard v-for="(item,i) in characterList" :key="i" class=""
                :category="item.category" :character="item.character" :title=item.title
                :rank="item.rank"
                />
            </div>

            <Teleport to="#app">
                <button v-show="showBackTop" @click="scrollToTop"
                    class="fixed bottom-8 right-8 p-3 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors">
                    ↑
                </button>
            </Teleport>
            
        </main>

        
  
</template>

<script setup lang="ts">
/**<ArticleCard
  id="1"
  title="文章标题"
  summary="文章摘要"
  category="存护"
  :character="'三月七'"
  date="2023-04-01"
  likes=10
  comments=2
/> */
import { ref, onMounted, onUnmounted } from 'vue'

import ArticleCard from '@/components/ArticleCard.vue'

const characterList= ref([
    {stars:'4', rank:'6', title: '三月七',category:'存护', character:'1001' },
    {stars:'4', rank:'6', title: '丹恒',category:'巡猎', character:'1002' },
    {stars:'4', rank:'6', title: '姬子',category:'智识', character:'1003' },
    {stars:'4', rank:'6', title: '瓦尔特',category:'虚无', character:'1004' },
    {stars:'5', rank:'6', title: '卡芙卡',category:'虚无', character:'1005' },
    {stars:'5', rank:'6', title: '银狼',category:'虚无', character:'1006' },
    {stars:'4', rank:'6', title: '阿兰',category:'毁灭', character:'1008' },
    {stars:'4', rank:'6', title: '艾丝妲',category:'同协', character:'1009' },
    {stars:'4', rank:'6', title: '黑塔',category:'智识', character:'1013' },
    {stars:'4', rank:'6', title: '布洛妮娅',category:'同协', character:'1101' },
    {stars:'5', rank:'6', title: '希儿',category:'巡猎', character:'1102' },
    {stars:'4', rank:'6', title: '希露瓦',category:'智识', character:'1103' },
    {stars:'4', rank:'6', title: '杰帕德',category:'存护', character:'1104' },
    {stars:'4', rank:'6', title: '娜塔莎',category:'丰饶', character:'1105' },
    {stars:'4', rank:'6', title: '佩拉',category:'虚无', character:'1106' },
    {stars:'4', rank:'6', title: '克拉拉',category:'毁灭', character:'1107' },
    {stars:'4', rank:'6', title: '桑博',category:'虚无', character:'1108' },
    {stars:'4', rank:'6', title: '虎克',category:'毁灭', character:'1109' },
    {stars:'4', rank:'6', title: '玲可',category:'丰饶', character:'1110' },
    {stars:'4', rank:'6', title: '卢卡',category:'虚无', character:'1111' },
    {stars:'5', rank:'6', title: '托帕',category:'巡猎', character:'1112' },
    {stars:'4', rank:'6', title: '青雀',category:'智识', character:'1201' },
    {stars:'4', rank:'6', title: '停云',category:'同协', character:'1202' },
    {stars:'5', rank:'6', title: '罗刹',category:'丰饶', character:'1203' },
    {stars:'5', rank:'6', title: '景元',category:'智识', character:'1204' },
    {stars:'5', rank:'6', title: '刃',category:'毁灭', character:'1205' },
    {stars:'4', rank:'6', title: '素裳',category:'巡猎', character:'1206' },
    {stars:'4', rank:'6', title: '驭空',category:'同协', character:'1207' },
    {stars:'5', rank:'6', title: '符玄',category:'存护', character:'1208' },
    {stars:'4', rank:'6', title: '彦青',category:'巡猎', character:'1209' },
    {stars:'4', rank:'6', title: '桂乃芬',category:'虚无', character:'1210' },
    {stars:'4', rank:'6', title: '白露',category:'丰饶', character:'1211' },
    {stars:'5', rank:'6', title: '镜流',category:'毁灭', character:'1212' },
    {stars:'5', rank:'6', title: '丹恒-饮月',category:'毁灭', character:'1213' },
    {stars:'4', rank:'6', title: '雪衣',category:'毁灭', character:'1214' },
    {stars:'4', rank:'6', title: '寒鸦',category:'同协', character:'1215' },
    {stars:'5', rank:'6', title: '藿藿',category:'丰饶', character:'1217' },
    {stars:'5', rank:'6', title: '飞霄',category:'巡猎', character:'1220' },
    {stars:'5', rank:'6', title: '云璃',category:'毁灭', character:'1221' },
    {stars:'5', rank:'6', title: '灵砂',category:'丰饶', character:'1222' },
    {stars:'4', rank:'6', title: '貘泽',category:'巡猎', character:'1223' },
    {stars:'4', rank:'6', title: '三月七-巡猎',category:'巡猎', character:'1224' },
    {stars:'5', rank:'6', title: '忘归人',category:'虚无', character:'1225' },
    {stars:'4', rank:'6', title: '加拉赫',category:'丰饶', character:'1301' },
    {stars:'5', rank:'6', title: '银枝',category:'智识', character:'1302' },
    {stars:'5', rank:'6', title: '阮梅',category:'同协', character:'1303' },
    {stars:'5', rank:'6', title: '砂金',category:'存护', character:'1304' },
    {stars:'5', rank:'6', title: '真理医生',category:'巡猎', character:'1305' },
    {stars:'5', rank:'6', title: '花火',category:'同协', character:'1306' },
    {stars:'5', rank:'6', title: '黑天鹅',category:'虚无', character:'1307' },
    {stars:'5', rank:'6', title: '黄泉',category:'虚无', character:'1308' },
    {stars:'5', rank:'6', title: '知更鸟',category:'同协', character:'1309' },
    {stars:'5', rank:'6', title: '流萤',category:'毁灭', character:'1310' },
    {stars:'4', rank:'6', title: '米莎',category:'毁灭', character:'1312' },
    {stars:'5', rank:'6', title: '星期日',category:'同协', character:'1313' },
    {stars:'5', rank:'6', title: '翡翠',category:'智识', character:'1314' },
    {stars:'5', rank:'6', title: '波提欧',category:'巡猎', character:'1315' },
    {stars:'5', rank:'6', title: '乱破',category:'智识', character:'1317' },
    {stars:'5', rank:'6', title: '大黑塔',category:'智识', character:'1401' },
    {stars:'5', rank:'6', title: '阿格莱雅',category:'记忆', character:'1402' },
    {stars:'5', rank:'6', title: '缇宝',category:'同协', character:'1403' },
    {stars:'5', rank:'6', title: '万敌',category:'毁灭', character:'1404' },
    {stars:'5', rank:'6', title: '那刻夏',category:'智识', character:'1405' },
    {stars:'5', rank:'6', title: '赛飞儿',category:'虚无', character:'1406' },
    {stars:'5', rank:'6', title: '遐蝶',category:'记忆', character:'1407' },
    {stars:'5', rank:'6', title: '风堇',category:'记忆', character:'1409' },
    {stars:'4', rank:'6', title: '星-毁灭',category:'毁灭', character:'8002' },
    {stars:'4', rank:'6', title: '星-存护',category:'存护', character:'8004' },
    {stars:'4', rank:'6', title: '星-同协',category:'同协', character:'8006' },
    {stars:'4', rank:'6', title: '星-记忆',category:'记忆', character:'8008' },
    
])

const tempList=ref([
    {stars:'4', rank:'6', title: '三月七',category:'存护', character:'1001' },
    {stars:'4', rank:'6', title: '丹恒',category:'巡猎', character:'1002' },
    {stars:'4', rank:'6', title: '姬子',category:'智识', character:'1003' },
    {stars:'4', rank:'6', title: '瓦尔特',category:'虚无', character:'1004' },
    {stars:'5', rank:'6', title: '卡芙卡',category:'虚无', character:'1005' },
    {stars:'5', rank:'6', title: '银狼',category:'虚无', character:'1006' },
    {stars:'4', rank:'6', title: '阿兰',category:'毁灭', character:'1008' },
    {stars:'4', rank:'6', title: '艾丝妲',category:'同协', character:'1009' },
    {stars:'4', rank:'6', title: '黑塔',category:'智识', character:'1013' },
    {stars:'4', rank:'6', title: '布洛妮娅',category:'同协', character:'1101' },
    {stars:'5', rank:'6', title: '希儿',category:'巡猎', character:'1102' },
    {stars:'4', rank:'6', title: '希露瓦',category:'智识', character:'1103' },
    {stars:'4', rank:'6', title: '杰帕德',category:'存护', character:'1104' },
    {stars:'4', rank:'6', title: '娜塔莎',category:'丰饶', character:'1105' },
    {stars:'4', rank:'6', title: '佩拉',category:'虚无', character:'1106' },
    {stars:'4', rank:'6', title: '克拉拉',category:'毁灭', character:'1107' },
    {stars:'4', rank:'6', title: '桑博',category:'虚无', character:'1108' },
    {stars:'4', rank:'6', title: '虎克',category:'毁灭', character:'1109' },
    {stars:'4', rank:'6', title: '玲可',category:'丰饶', character:'1110' },
    {stars:'4', rank:'6', title: '卢卡',category:'虚无', character:'1111' },
    {stars:'5', rank:'6', title: '托帕',category:'巡猎', character:'1112' },
    {stars:'4', rank:'6', title: '青雀',category:'智识', character:'1201' },
    {stars:'4', rank:'6', title: '停云',category:'同协', character:'1202' },
    {stars:'5', rank:'6', title: '罗刹',category:'丰饶', character:'1203' },
    {stars:'5', rank:'6', title: '景元',category:'智识', character:'1204' },
    {stars:'5', rank:'6', title: '刃',category:'毁灭', character:'1205' },
    {stars:'4', rank:'6', title: '素裳',category:'巡猎', character:'1206' },
    {stars:'4', rank:'6', title: '驭空',category:'同协', character:'1207' },
    {stars:'5', rank:'6', title: '符玄',category:'存护', character:'1208' },
    {stars:'4', rank:'6', title: '彦青',category:'巡猎', character:'1209' },
    {stars:'4', rank:'6', title: '桂乃芬',category:'虚无', character:'1210' },
    {stars:'4', rank:'6', title: '白露',category:'丰饶', character:'1211' },
    {stars:'5', rank:'6', title: '镜流',category:'毁灭', character:'1212' },
    {stars:'5', rank:'6', title: '丹恒-饮月',category:'毁灭', character:'1213' },
    {stars:'4', rank:'6', title: '雪衣',category:'毁灭', character:'1214' },
    {stars:'4', rank:'6', title: '寒鸦',category:'同协', character:'1215' },
    {stars:'5', rank:'6', title: '藿藿',category:'丰饶', character:'1217' },
    {stars:'5', rank:'6', title: '飞霄',category:'巡猎', character:'1220' },
    {stars:'5', rank:'6', title: '云璃',category:'毁灭', character:'1221' },
    {stars:'5', rank:'6', title: '灵砂',category:'丰饶', character:'1222' },
    {stars:'4', rank:'6', title: '貘泽',category:'巡猎', character:'1223' },
    {stars:'4', rank:'6', title: '三月七-巡猎',category:'巡猎', character:'1224' },
    {stars:'5', rank:'6', title: '忘归人',category:'虚无', character:'1225' },
    {stars:'4', rank:'6', title: '加拉赫',category:'丰饶', character:'1301' },
    {stars:'5', rank:'6', title: '银枝',category:'智识', character:'1302' },
    {stars:'5', rank:'6', title: '阮梅',category:'同协', character:'1303' },
    {stars:'5', rank:'6', title: '砂金',category:'存护', character:'1304' },
    {stars:'5', rank:'6', title: '真理医生',category:'巡猎', character:'1305' },
    {stars:'5', rank:'6', title: '花火',category:'同协', character:'1306' },
    {stars:'5', rank:'6', title: '黑天鹅',category:'虚无', character:'1307' },
    {stars:'5', rank:'6', title: '黄泉',category:'虚无', character:'1308' },
    {stars:'5', rank:'6', title: '知更鸟',category:'同协', character:'1309' },
    {stars:'5', rank:'6', title: '流萤',category:'毁灭', character:'1310' },
    {stars:'4', rank:'6', title: '米莎',category:'毁灭', character:'1312' },
    {stars:'5', rank:'6', title: '星期日',category:'同协', character:'1313' },
    {stars:'5', rank:'6', title: '翡翠',category:'智识', character:'1314' },
    {stars:'5', rank:'6', title: '波提欧',category:'巡猎', character:'1315' },
    {stars:'5', rank:'6', title: '乱破',category:'智识', character:'1317' },
    {stars:'5', rank:'6', title: '大黑塔',category:'智识', character:'1401' },
    {stars:'5', rank:'6', title: '阿格莱雅',category:'记忆', character:'1402' },
    {stars:'5', rank:'6', title: '缇宝',category:'同协', character:'1403' },
    {stars:'5', rank:'6', title: '万敌',category:'毁灭', character:'1404' },
    {stars:'5', rank:'6', title: '那刻夏',category:'智识', character:'1405' },
    {stars:'5', rank:'6', title: '赛飞儿',category:'虚无', character:'1406' },
    {stars:'5', rank:'6', title: '遐蝶',category:'记忆', character:'1407' },
    {stars:'5', rank:'6', title: '风堇',category:'记忆', character:'1409' },
    {stars:'4', rank:'6', title: '星-毁灭',category:'毁灭', character:'8002' },
    {stars:'4', rank:'6', title: '星-存护',category:'存护', character:'8004' },
    {stars:'4', rank:'6', title: '星-同协',category:'同协', character:'8006' },
    {stars:'4', rank:'6', title: '星-记忆',category:'记忆', character:'8008' },
    
])

const rolNum=ref('')

const showBackTop = ref(false)

const getRandomCharacters = ()=>{
  characterList.value=tempList.value
  let len=characterList.value.length
  let randLen=rolNum.value
  let randomCharacters = [];

  if (randLen > len) {
    randLen = len; // 如果请求的数量大于数组长度，调整为数组长度
  }

  for (let i = 0; i < randLen; i++) {
    let randomIndex = Math.floor(Math.random() * len);
    let selectedCharacter = characterList.value[randomIndex];

    // 检查是否已经选择过该元素
    if (!randomCharacters.includes(selectedCharacter)) {
      randomCharacters.push(selectedCharacter);
    } else {
      // 如果重复，则重新生成随机索引
      i--;
    }
  }

 characterList.value=randomCharacters
}

const getRandomRank=()=>{
  let len=characterList.value.length
  for(let i=0;i<len;i++){
    if(characterList.value[i].stars=='4'){
       characterList.value[i].rank='6'
    }else{
      let randNum=Math.floor(Math.random()*7)
      characterList.value[i].rank=randNum.toString()
    }
  }
}

const reset = ()=>{
  rolNum.value=''
  characterList.value=tempList.value
}

const handleScroll = () => {
    showBackTop.value = window.scrollY > 500
}

const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
}

onMounted(() => {
    window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll)
})
</script>
